
import { Component } from "react";

class Todos extends Component {
    constructor(props) {
        super(props)
        this.state = {
            todo: "",
            list: [
                { id: Date.now(), text: "学习React", checked: true, edit: false }
            ]
        }
    }
    change(e) {
        this.setState({
            todo: e.target.value
        })
    }
    add() {
        if (!this.state.todo) {
            alert("内容不能为空")
            return
        }
        this.setState(_ => ({ list: [..._.list, { id: Date.now(), text: _.todo, checked: false, edit: false }] }))
        this.setState({
            todo: ""
        })

    }
    confirm(e) {
        if (e.keyCode == 13) {
            this.add()
        }
    }
    //选中与取消选中
    changechecked(id) {
        // this.setState(_ => (
        //     {
        //         list: _.list.map((item) => {
        //             if (item.id == id) {
        //                 item.checked = !item.checked
        //                 return item
        //             } else {
        //                 return item
        //             }
        //         })
        //     }
        // ))
        this.setState(_ => (
            {
                list: _.list.map((item) =>item.id==id?{...item,checked:!item.checked}:item)
            }
        ))
    }
    checkedall(e) {

        this.setState(_ => (
            {
                list: _.list.map((item) => {
                    item.checked = e.target.checked
                    return item
                })
            }
        ))
    }

    //删除数据
    dele(id) {
        this.setState(_ => (
            { list: _.list.filter(item => item.id != id) }
        ))
    }
    //进入编辑态
    enteredit(id) {
        // this.setState(_ => (
        //     {
        //         list: _.list.map(item => {
        //              if(item.id==id){
        //                 item.edit=true
        //                 return item
        //              }else{
        //                  return item
        //              } 
        //         })
        //     }
        // ))
        this.setState(_ => (
            {
                list: _.list.map(item => item.id == id ? { ...item, edit: true } : item)
            }
        )
        )
    }

        //退出编辑态
        exitedit(id){
            // this.setState(_ => (
            //     {
            //         list: _.list.map(item => {
            //              if(item.id==id){
            //                 item.edit=false
            //                 return item
            //              }else{
            //                  return item
            //              } 
            //         })
            //     }
            // ))
            this.setState(_ => (
                {
                    list: _.list.map(item => item.id == id ? { ...item, edit: false } : item)
                }
            ))
        }
        editconfirm(e, id){
            if (e.keyCode == 13) {
                this.exitedit(id)
            }
        }
        editlist(e, id){
            // this.setState(_ => (
            //     {
            //         list: _.list.map(item => {
            //             if (item.id == id) {
            //                 item.text = e.target.value
            //                 return item
            //             } else {
            //                 return item
            //             }
            //         })
            //     }
            // ))
            this.setState(_ => (
                {
                    list: _.list.map(item =>item.id==id?{...item,text:e.target.value}:item)
                }
            ))
        }
        renders(item) {
            if (item.edit) {
                return <input
                    type="text"
                    value={item.text}
                    onChange={(e) => this.editlist(e, item.id)}
                    onBlur={() => this.exitedit(item.id)}
                    onKeyUp={(e) => this.editconfirm(e, item.id)}
                />
            } else {
                return <div>
                    <input type="checkbox"
                        checked={item.checked}
                        name="" id=""
                        onChange={() => this.changechecked(item.id)} />
                    <div>{item.text}</div>
                    {item.checked && <button onClick={() => this.dele(item.id)}>删除</button>}
                    <button onClick={() => this.enteredit(item.id)}>编辑</button>
                </div>
            }
        }
        render() {
            let { todo, list } = this.state
            return (
                <div className="box">
                    <header className="header" >
                        {/* <input type="checkbox" name="" id="" key="2"  onChange={(e)=>this.checkedall(e)}/> */}
                        <input type="checkbox" onChange={(e) => { this.checkedall(e) }} name="" id="" />
                        <input

                            className="add"
                            type="text"
                            placeholder="What needs to be done?"
                            value={todo}
                            onChange={(e) => { this.change(e) }}
                            onKeyDown={(e) => this.confirm(e)} />
                        <button key="4" onClick={() => this.add()}>添加</button>
                    </header>
                    <main>
                        {
                            list.map((item) => {
                                return (
                                    <div className="list" key={item.id}>
                                        {this.renders(item)}
                                    </div>
                                )
                            })
                        }
                    </main>
                </div>
            )
        }
    }

export default Todos